<template>
  <div class="app-container">
    <!-- 查询模块 -->
    <div class="formDiv">
      <el-form ref="form" :inline="true" :model="form" label-width="140px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="订单号">
              <el-input v-model="form.order_sn" clearable placeholder="请输入订单号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="姓名/手机号">
              <el-input v-model="form.keyword" clearable placeholder="请输入姓名/手机号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="购买卡项">
              <el-select v-model="form.type" clearable placeholder="请选择">
                <el-option
                  v-for="item in statusOption"
                  :key="item.value"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="操作时间" width="236">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="dates"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-button style="margin-left:60px" type="primary" @click="searchFn">查询</el-button>
            <!--    v-if="hasPermission('AdminExamQuesProvider.exportHospitalExamList')" -->
            <el-button plain type="primary" class="el-icon-download" @click="excelEvent">导出</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 主页列表 -->
    <div v-loading="tableLoading" class="listDiv">
      <!-- table列表 -->
      <el-table :data="tableData" class="tableData" style="width: 100%">
        <el-table-column type="index" label="编号" width="100px" align="center"></el-table-column>
        <el-table-column prop="order_sn" label="订单编号" align="center"></el-table-column>
        <el-table-column prop="user_name" label="姓名" align="center"></el-table-column>
        <el-table-column prop="user_phone" label="手机号" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.user_phone |phonereg}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="user_type_name" label="角色" align="center"></el-table-column>
        <el-table-column prop="type_name" label="购买卡项" align="center"></el-table-column>
        <el-table-column prop="money" label="支付金额" align="center"></el-table-column>
        <el-table-column prop="coin" label="补贴金额" align="center"></el-table-column>
        <el-table-column prop="pay_time" label="支付时间" align="center">
          <template slot-scope="scope">
            {{(scope.row.pay_time-0*1000)|date(1)}}
          </template>
        </el-table-column>
        <el-table-column prop="allowance_time_compact" label="补贴期数" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="subsidyInfo(scope.row)">补贴详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagesCon">
        <div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="form.page"
            :page-sizes="page_sizes"
            :page-size="form.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_totals"
          ></el-pagination>
        </div>
      </div>
      <!-- 补贴详情弹窗 -->
      <el-dialog title="补贴详情" :visible.sync="dividedDialogVisible" width="50%" center>
        <div>
          <el-table
            ref="tableDatas"
            :data="tableDatas"
            style="width: 100%"
            v-loading="LoadingTable"
            border
          >
            <el-table-column label="姓名" prop="userName" align="center" />
            <el-table-column label="手机号" prop="phone" align="center" />
            <el-table-column label="购买卡项" prop="cardType" align="center" />
            <el-table-column label="补贴总金额" prop="sumCoin" align="center" />
            <el-table-column label="当期补贴金币" prop="coin" align="center" />
            <el-table-column label="补贴状态" prop="type" align="center" />
            <el-table-column label="补贴发放时间" prop="createdAt" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.createdAt}}</span>
                <!-- <span v-if="scope.row.==0">--</span> -->
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="params.pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
          />
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import filter from "@/assets/filter.js";
import { getProvinces, getHospital, branch, detail } from "@/api/goddessJava";
import {
  allowance_index,
  get_type_name,
  allowance_export
} from "@/api/goddessMange";
import { downFile } from "@/filters/index";
import { exportfile } from "@/api/commjs/exprot";
export default {
  name: "subsidyQueen",
  data() {
    return {
      params: { pageNum: 1, pageSize: 10 },
      total: 0,
      permissionJson: JSON.parse(localStorage.getItem("permissionJson")),
      tableLoading: false,
      LoadingTable: false,
      dividedDialogVisible: false,
      // 卡项状态
      statusOption: [
        {
          id: null,
          name: "全部"
        }
      ],
      dates: [],
      tagOption: [],
      officeOption: [],
      form: {
        hospitalId: null,
        tagsId: null,
        officeId: null,
        status: null,
        examStatus: null,
        page: 1,
        size: 10
      },
      //列表数组
      tableData: [],
      tableDatas: [],
      page_sizes: [10, 30, 50, 100],
      page_totals: 0
    };
  },
  filters: {
    cardType: function(e) {
      return window.helper.cardType(e);
    },
    status: function(val) {
      return this.statusOption.map(item => {
        if (item.value == val) {
          return item.label;
        }
      });
    },
     // 调用方法
    // new Date(1569748161*1000).format('yyyy年MM月dd日 hh:mm:ss')
      // 时间戳转化
    dateFilter(e) {
      if (e != 0) {
        return new Date(Number(e) * 1000).format('yyyy-MM-dd hh:mm:ss')
      } else {
        return ''
      }
    },
  },
  watch: {
    "form.tagsId"(val) {
      if ((val = "")) {
        this.form.tagsId = null;
      }
    }
  },
  created() {},
  mounted() {
    this.optfn();
    this.getList(this.form);
  },
  methods: {
    handleSizeChange2(val) {
      this.params.pageNum = 1;
      this.params.pageSize = val;
      this.inffn();
    },
    handleCurrentChange2(val) {
      this.params.pageNum = val;
      this.inffn();
    },
    //详情
    async subsidyInfo(datas) {
      if (datas) this.params.id = datas.id - 0;
      this.params.pageNum = 1;
      this.inffn();
    },
    async inffn() {
      this.dividedDialogVisible = true;
      this.LoadingTable = true;
      let res = await detail(this.params);
      // this.$message.warning(res.data.msg);
      if (res.data.code == 0) {
        this.LoadingTable = false;
        console.log("详情", res);
        this.tableDatas = res.data.data.list;
        this.total = res.data.data.count;
      } else {
        this.$message.warning(res.data.msg);
      }
    },
    //下拉
    async optfn() {
      let res = await get_type_name();
      if (res.data.code == 200)
        this.statusOption = [...res.data.data, this.statusOption];
      //  console.log(res.data.data,111)
    },
    //按钮权限
    hasPermission(e) {
      return window.helper.hasPermission(e);
    },
    //成功状态弹窗
    succStatus(txt) {
      this.$message({
        message: txt + "成功",
        type: "success"
      });
    },
    //失败状态弹窗
    errorStatus(txt) {
      this.$message.error(txt + "失败");
    },
    //查询
    searchFn() {
      this.form.page = 1;
      this.form.pay_time_start = this.dates ? this.dates[0] : "";
      this.form.pay_time_end = this.dates ? this.dates[1] : "";
      this.getList(this.form);
    },
    // 路由跳转
    toRoutes(e, userId, type) {
      let route = { name: e, query: { userId: userId, type: type } };
      this.$router.push(route);
    },
    //列表数据获取
    getList(e) {
      this.tableLoading = true;
      let datas = e;
      allowance_index(datas)
        .then(res => {
          console.log(res);
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            this.page_totals = res.data.meta.total;
          }
          this.tableLoading = false;
        })
        .catch(error => {
          this.$message.error(error);
        });
    },
    //导出
    excelEvent() {
      exportfile("/admin/qreward/allowance_export", this.form, 1);
      // allowance_export(this.form).then(res => {
      //   exportfun(res);
      // });
    },
    //改变页面条数
    handleSizeChange(val) {
      this.form.size = val;
      this.getList(this.form);
    },
    //选择页数
    handleCurrentChange(val) {
      this.form.page = val;
      this.getList(this.form);
    }
  }
};
</script>
<style scoped>
/* 分页 */
.pagesCon {
  height: 40px;
  margin-top: 20px;
}
.pagesCon > div {
  float: right;
}
/* 表单样式修改 */
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
</style>
